//
//  ContentView.swift
//  skincare
//
//  Created by whu125 on 2023/4/23.
//

import SwiftUI
struct RoundedButton: View {

    var action: () -> Void
    var title: String
    
    var body: some View {
        GeometryReader { geometry in
            Button(action: action) {
                Text(title)
                    .font(.headline)
                    .foregroundColor(.white)
                    .frame(width: geometry.size.width/1.8, height: 50)
                    .background(Color(red: 0.10196078431372549, green: 0.8274509803921568, blue: 0.6431372549019608))
                    .cornerRadius(35)
            }
            .padding(.leading, geometry.size.width/4.2)
        }
    }
}

struct LoginView: View {
    @State var isSheet = false
    @State var username = ""
    @State var password = ""
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 0.0) {
                Text("Hello,")
                    .font(.largeTitle)
                    .foregroundColor(Color(red: 0.10196078431372549, green: 0.8274509803921568, blue: 0.6431372549019608))
                    .multilineTextAlignment(/*@START_MENU_TOKEN@*/.leading/*@END_MENU_TOKEN@*/)
                    .lineLimit(1)
                    .padding(.leading, 20.0)
                
                Text("Welcome!")
                    .font(.largeTitle)
                    .foregroundColor(Color(red: 0.10196078431372549, green: 0.8274509803921568, blue: 0.6431372549019608))
                    .multilineTextAlignment(.leading)
                    .padding([.leading, .bottom], 20.0)
                
                Text("祛痘精灵")
                    .font(.custom("祛痘精灵", size: 60))
                    .fontWeight(.bold)
                    .foregroundColor(Color.black)
                    .padding(.leading, 120.0)
                    .zIndex(1)
                Text("SKINCARE")
                    .font(.custom("祛痘精灵", size: 30))
                    .fontWeight(.bold)
                    .foregroundColor(Color.black)
                    .padding(.leading, 200.0)
                    .zIndex(1)
                
                Image("loginPicture")
                    .padding(.top, 0.0)
                    .background(
                        Circle()
                            .fill(Color(red: 0.8196078431372549, green: 0.9333333333333333, blue: 0.9019607843137255))
                            .frame(width: 700,height: 700)
                            .offset(x: 100, y:110)
                            .zIndex(-1)
                        
                    )
                
                RoundedButton(action: {
                    // 点击按钮后执行的操作
                    isSheet = true
                }, title: "登陆/注册")
                .padding()
                .sheet(isPresented: $isSheet) {
                    ZStack {
                        Color(red: 0.1, green: 0.83, blue: 0.64,opacity:1.0)
                        
                        
                                    .edgesIgnoringSafeArea(.all)
                                    .onTapGesture {
                                        isSheet = false
                                    }
                                
                                VStack {
                                    Image("icon")
                                        .resizable()
                                        .scaledToFit()
                                        .frame(width: 100, height: 100)
                                        .foregroundColor(Color(UIColor.white))
                                    
                                    TextField("请输入账号", text: $username)
                                        .padding(.horizontal)
                                        .frame(height: 44)
                                        .background(Color(UIColor.white))
                                        .cornerRadius(8)
                                        .padding([.top, .leading, .trailing])
                                    
                                    SecureField("请输入密码", text: $password)
                                        .padding(.horizontal)
                                        .frame(height: 44)
                                        .background(Color(UIColor.white))
                                        .cornerRadius(8)
                                        .padding([.top, .leading, .trailing])
                                    
                                    Button(action: {
                                        // 处理登录逻辑
                                    }) {
                                        Text("登录")
                                            .fontWeight(.semibold)
                                            .frame(minWidth: 0, maxWidth: .infinity)
                                            .frame(height: 44)
                                            .foregroundColor(.white)
                                            .background(Color(red: 36/255,green: 171/255,blue: 175/255))
                                            .cornerRadius(30)
                                            .padding(.horizontal)
                                    }
                                    .frame(width: 160.0)
                                    .padding(.top, 16)
                                }
                                
                                .padding()
                            }
                    .ignoresSafeArea()
                }
            }
        }
    }
}

struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()
    }
}
